<template>
   <div>
       <div class="my-select" style="width: 100%">
           <div  :class="!isFocus?'select-selection':'select-selection select-focus'" oui-e-click="event2show">
               <div>
                   <span class="select-selected-value" v-model="value">{{getSelectedItemDisplay()}}</span>
                   <i class="arrow-down icon-select-arrow"></i>
               </div>
           </div>
           <div  class="select-dropdown" style="width: 100%">
               <ul class="select-dropdown-list">
                   <li v-for="item in data" :class="getSelectItemCls(item)" oui-e-click="event2selectItem" :data-value="item.value">{{item.display}}</li>
               </ul>
           </div>
       </div>
   </div>
</template>

<script>
    exports =
    {
        templateType:'vue',
        data: function () { //作为组件的输入参数
            return {
                isFocus:false,
                value:'',
                display:'',
                bindProp:'',
                onUpdate:function(){},
                data:[]
            };
        },
        //创建时的初始化
        created:function(){

            console.log('created');
        },
        //渲染完成后其他处理
        mounted:function(){
            this.init();
        },
        methods:{
            //点击触发事件
            event2show:function(cfg){
                this.isFocus = !this.isFocus;
            },
            event2selectItem:function(cfg){
                var ov = this.value;
                this.value =$(cfg.el).attr('data-value');
                var v = this.value;
                var key = this.bindProp;
                if(key){
                    debugger;
                    oui.JsonPathUtil.setObjByPathNoArr(key,window,v,true);

                    this.onUpdate&&this.onUpdate(key,v,ov,{ //针对不同控件类型，处理不同的value,data4DB,display 显示值
                        value:v, //值
                        data4DB:v,//提交到后端的额外数据
                        display:v //显示值
                    }); //外部构造的方法调用
                }
                this.isFocus = false;
            },
            //获取当前选项的样式
            getSelectItemCls:function(item){
                if(item.value==this.value){
                  return 'select-item select-item-selected';
                }
                return 'select-item'
            },
//            //根据值 获取显示值
            getSelectedItemDisplay:function(){
                var arr = this.data ||[];
                var value = this.value;
                var one = oui.findOneFromArrayBy(arr,function(item){
                    if(item.value == value){
                        return true;
                    }
                });
                var display = one?one.display||"":"";
                return display;
            },
            init:function(){
                debugger;
                this.$nextTick(function(){
                    var me = this;
                    me.refresh();
                });
            },

            // 销毁时的逻辑处理
            destroy:function(){
                console.log('destroy');
            }
        }

    }
</script>

<style>
    .my-select {
        display: inline-block;
        width: 100%;
        min-width: 80px;
        box-sizing: border-box;
        vertical-align: middle;
        color: #515a6e;
        font-size: 14px;
        line-height: normal;
        position: relative;
    }
    .select-selection {
        width: 100%;
        display: block;
        box-sizing: border-box;
        outline: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        position: relative;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdee2;
        transition: all .2s ease-in-out;
    }

    .select-selection:hover,
    .select-selection.select-focus {
        border-color: #57a3f3;
        box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
    }

    .select-selected-value {
        display: block;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
    }

    .icon-select-arrow {
        position: absolute;
        top: 50%;
        right: 8px;
        line-height: 1;
        margin-top: -7px;
        font-size: 14px;
        color: #808695;
        transition: all .2s ease-in-out;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: middle;
    }

    .icon-select-arrow::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background-color: transparent;
        border-left: 1.5px solid #808695;
        border-bottom: 1.5px solid #808695;
        transform: rotate(-45deg);
    }

    .select-dropdown {
        min-width: 80px;
        width: 100%;
        max-height: 200px;
        overflow: auto;
        margin: 5px 0;
        padding: 5px 0;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        position: absolute;
        z-index: 2;
        transform-origin: center top 0px;
        transition: all 0.3s;
        will-change: top, left;
        top: 30px;
        left: 0;
        transform: scale(1, 0);
        opacity: 0;
    }
    .select-selection + .select-dropdown{
        transform: scale(1, 0); opacity: 0;
    }
    .select-selection.select-focus + .select-dropdown{
        transform: scale(1, 1); opacity: 1;
    }

    .select-item {
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 12px !important;
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background .2s ease-in-out;
    }

    .select-item.select-item-selected,
    .select-item:hover {
        color: #2d8cf0;
        background-color: #f3f3f3;
    }

</style>
